<template>
  <HeaderPage :headerNavindex="2" />
  <div class="articalDetailOuter">
    <el-scrollbar>
      <div class="articalDetailMainOuter">
        <div class="articalDetailMain">
          <h2 class="title">{{articleData.title}}</h2>
          <div>
            <p v-html="articleData.articleContent"></p>
          </div>
        </div>
        <!-- 点赞 -->
        <div class="comment">
          <div class="praise">
            <span :style="praiseF === false?'background-color: #eaeeee;':'background-color: #ff0000;'"
              @click="praiseBtn">赞</span>
          </div>
        </div>
        <!-- 评论 -->
        <div class="discussList">
          <p>评论列表</p>
          <ul>
            <li v-for="item in discussData" :key="item._id">
              <p>{{item.username}}</p>
              <p>{{item.discuss}}</p>
            </li>
          </ul>
        </div>
        <!-- 评论 -->
        <div class="discuss">
          <p>评论</p>
          <el-input v-model="textarea" :rows="3" type="textarea" placeholder="请输入评论" />
          <el-button type="primary" round @click="confirmBtn">提交</el-button>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import HeaderPage from '../../../components/HeaderPage.vue';
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
import { gainArticleApi, articleDiscussApi } from '../../../service/apiModule/articleApi'
import { praise, findPraiseApi } from '../../../service/apiModule/praise'
import {
  discussAddApi,
  findDiscussApi
} from '../../../service/apiModule/discussApi'
import { findPraiseNumApi } from '../../../service/apiModule/praise'

const route = useRoute()

onMounted(() => {
  gainArticle()
  findPraise()
  setTimeout(() => {
    findDiscuss()
    findPraiseNum()
  }, 600)
})

let articleData = reactive({
  title: '',
  articleContent: '',
  _id: ''
})

let praiseF = ref(null)

const gainArticle = async () => {
  const { data: res } = await gainArticleApi({ id: route.query.id })
  articleData = res.data
}
const userId = JSON.parse(localStorage.getItem('userInfo')!)

// 查
const findPraise = async () => {
  const { data: res } = await findPraiseApi({
    userId: userId._id,
    articleId: route.query.id,
  })
  praiseF.value = res.data.status
}
const praiseNum = ref(0)
// 获取点赞数量
const findPraiseNum = async () => {
  const { data: res } = await findPraiseNumApi({ title: articleData.title })
  praiseNum.value = res.data
  const { data: upRes } = await articleDiscussApi({ id: articleData._id, num: res.data })
}

// 点赞
const praiseBtn = async () => {
  const { data: res } = await praise({
    userId: JSON.parse(localStorage.getItem('userInfo')!)._id,
    title: articleData.title,
    articleId: articleData._id,
    status: !praiseF.value,
  })
  findPraise()
  findPraiseNum()
}

const discussData = ref([{
  auditStatus: true,
  discuss: "",
  title: "",
  username: "",
  _id: "",
}])

// 查询评论
const findDiscuss = async () => {
  const { data: res } = await findDiscussApi({
    userId: userId.username,
    title: articleData.title,
  })
  if (res.status.code === 200) {
    discussData.value = res.data
  }
}

// 评论
const textarea = ref('')

// 提交评论
const confirmBtn = async () => {
  if (textarea.value === '') {
    ElMessage.info('请输入评论!')
  } else {
    const data = {
      username: userId.username,
      title: articleData.title,
      discuss: textarea.value,
      auditStatus: true
    }
    const { data: res } = await discussAddApi(data)
    if (res.status.code === 200) {
      textarea.value = ''
      findDiscuss()
    }
  }
}

</script>

<style lang="scss" scoped>
.articalDetailOuter {
  width: 100vw;
  height: 100vh;
  padding-top: 60px;
  padding-left: 60px;
  display: flex;
  align-items: start;
  background-color: #292929;

  .el-scrollbar {
    width: 100%;
  }

  .articalDetailMainOuter {
    width: 80%;
    height: 99.8%;
    margin: 0 auto;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    min-height: 560px;
    background-color: rgba(255, 255, 255, 1);
  }

  .articalDetailMain {
    height: 100%;

    .title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      margin-bottom: 30px;
    }
  }

  .comment {
    margin-top: 40px;
    padding-bottom: 40px;

    .praise {
      width: 100%;
      text-align: center;

      span {
        display: inline-block;
        border-radius: 50%;
        padding: 12px;
        font-size: 20px;
        cursor: pointer;
      }
    }

  }

  .discussList {
    width: 80%;
    margin: 0 auto;
    border: 1px solid;
    padding: 20px;
    border-radius: 10px;

    &>p {
      margin-bottom: 10px;
    }

    ul {
      li {
        font-size: 12px;

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        p {
          &:first-child {
            font-weight: 600;
            font-size: 14px;
          }

          &:last-child {
            padding-left: 20px;
            font-size: 13px;
          }
        }
      }
    }
  }

  .discuss {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;

    &>p {
      margin-bottom: 10px;
    }

    .el-button {
      margin-top: 10px;
    }
  }

}
</style>